<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        
        <!--卡片视图区-->
        <el-card>
            <!--搜索与添加区域-->
            <!--el-row是在layout布局里,:gutter表示不同el-col的间距,el-span表示每个占多宽的距离-->
                <el-row :gutter="20">
                    <el-col :span="7">
                        <!--搜索框先绑定搜索内容，按钮绑定搜索方法，当搜索框内容改变时点击按钮即可-->
                        <!--clearable @clear="getUserList"对应右边的小叉号，清空搜索框时获取全部数据-->
                        <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
                            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="4">
                        <!--addDialogVisible：显示对话框-->
                        <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
                    </el-col>
                </el-row>
            <!--用户列表区域-->
            <el-table :data="userlist" border stripe>
                <!--这个索引列是element-ui自带的-->
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="电话" prop="mobile"></el-table-column>
                <el-table-column label="角色" prop="role_name"></el-table-column>
                <el-table-column label="状态" prop="mg_state">
                    <!--重要，作用域插槽-->
                    <template slot-scope="scope">
                        <!--{{scope.row}} //可以获取到这一行的所有信息-->
                        <!--开关-->
                        <!--因为·mg_state是true/false值，直接写的话会变成字符串，因此要用template+switch-->
                        <el-switch
                                v-model="scope.row.mg_state"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="userStateChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <!--放不下三个按钮，手动给宽度-->
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope" >
                        <!--手动设置大小：size="mini"-->
                        <!--修改按钮，添加事件,要获取到id等值，用作用域插槽-->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
                        
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
                        <!--给按钮加文字提示,鼠标移到上面就会提示,:enterable="false"移动到其他按钮自动隐藏-->
                        <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
                            <!--setRole展示分配角色对话框-->
                            <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页区域-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--添加用户对话框-->
        <!--width="50%"对话框占屏幕宽度一半-->
        <!--addDialogVisible控制对话框是否关闭-->
        <!--@close在关闭对话框时清空表单-->
        <el-dialog
                title="提示"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClosed">
            <!--内容主体区域-->
            <!--添加表单-->
            <el-form :model="addForm" :rules="addFormRules" ref="ruleFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary"  @click="addUser">确 定</el-button>
            </span>
        </el-dialog>
        
        <!--修改用户对话框-->
        <el-dialog
                title="修改用户"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editDialogClosed">
            <!--内容主体区域-->
            <!--修改表单,editForm绑定根据id获取到的数据-->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="用户名">
                    <!--disabled表示不可修改-->
                    <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="editForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary"  @click="editUserInfo">确 定</el-button>
            </span>
        </el-dialog>
        
    <!--分配角色对话框-->
        <el-dialog
                title="分配角色"
                :visible.sync="setRoleDialogVisible"
                width="30%"
                @close="setRoleDialogClosed">
            <div>
                <p>当前的用户：{{userInfo.username}}</p>
                <p>当前的角色：{{userInfo.role_name}}</p>
                <p>分配新角色：
                    <!--select选择器-->
                    <el-select v-model="selectedRoleId" placeholder="请选择">
                        <!--key绑定和传入value都是id就行，label显示用roleName-->
                        <el-option
                                v-for="item in rolesList"
                                :key="item.id"
                                :label="item.roleName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'user',
    data() {
      //自定义校验规则：验证邮箱和手机号,elementUI上的
      //校验规则写完还要在下面使用
      var checkMail = (rule,value,cb) => {
        //正则表达式，可以从网上搜到，前后加/即可
        const regMail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (regMail.test(value)) {
          return cb()
        }
        cb(new Error('请输入合法的邮箱'))
      }
      var checkMobile = (rule,value,cb) => {
        const regMail = /0?(13|14|15|17|18|19)[0-9]{9}/
        if (regMail.test(value)) {
          return cb()
        }
        cb(new Error('请输入合法的手机号'))
      }
      
      return{
        //获取用户列表对象
        queryInfo:{
          query:'',
          //当前页数
          pagenum:1,
          //当前每页显示多少条数据
          pagesize:2
        },
        //接收用户数据
        userlist:[],
        total:0,
        //控制对话框显示和隐藏
        addDialogVisible:false,
        editDialogVisible:false,
        //添加用户表单
        addForm:{
          username:'',
          password:'',
          email:'',
          mobile:''
        },
        //添加表单验证规则对象
        addFormRules:{
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          //这里使用了上面的校验规则
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            {validator:checkMail, trigger: 'blur'},
            { min: 3, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机', trigger: 'blur' },
            {validator:checkMobile, trigger: 'blur'},
            { min: 3, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        },
        //修改表单的验证规则，同上，去掉用户名和密码部分
        editFormRules:{
          //这里使用了上面的校验规则
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            {validator:checkMail, trigger: 'blur'},
            { min: 3, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机', trigger: 'blur' },
            {validator:checkMobile, trigger: 'blur'},
            { min: 3, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        },
        //根据id查询到的用户值
        editForm:{},
        //分配角色对话框的显示与隐藏
        setRoleDialogVisible:false,
        //需要被分配角色的用户信息
        userInfo:{},
        //所有角色的数据列表
        rolesList:[],
        //select选择的角色ID值
        selectedRoleId:''
      }
    },
    created () {
      this.getUserList()
    },
    methods:{
        getUserList(){
          this.$http.get('users',{
            params:this.queryInfo
          })
          .then(res => {
            // console.log(res)
            if (res.data.meta.status !== 200) {
               return this.$message.error("获取用户列表失败")
            }
            // this.$message.success("获取用户列表成功")
            this.userlist = res.data.data.users
            this.total = res.data.data.total
          })
          .catch(err => {
            console.log(err)
          })
        },
      //监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        //获取完成要重新渲染数据
        this.getUserList()
      },
     //监听页码值改变的事件
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage
        this.getUserList()
      },
      //监听switch开关状态的改变
      userStateChange(userInfo) {
        // console.log(userInfo)
        this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
        .then(res => {
          // console.log(res)
          if (res.data.meta.status !== 200) {
            //状态取反，即状态不做改变
            userInfo.mg_state = !userInfo.mg_state
            return this.$message.error("更新用户状态失败")
          }
          this.$message.success("更新用户状态成功")
        })
      },
      //控制关闭对话框时清空表单
      addDialogClosed() {
          this.$refs.ruleFormRef.resetFields()
      },
      //点击按钮，添加新用户
      addUser() {
         this.$refs.ruleFormRef.validate(valid => {
           if (!valid) return
          //validate可以进行预验证，如果前面定义的规则都通过，则返回true
         //  这时再发起网络请求
           this.$http.post('users',this.addForm)
           .then(res => {
             if (res.data.meta !== 201){
               this.$message.error('添加用户失败')
             }
               //必备三步
               this.$message.success('添加用户成功')
               //重新获取用户列表
               this.getUserList()
               //关闭窗口
               this.addDialogVisible = false
             
           })
         })
       
      },
      //
      showEditDialog(id) {
        
        this.$http.get('users/'+id)
        .then(res => {
          if (res.data.meta.status !== 200){
            this.$message.error('查询用户失败')
          }
          this.$message.success('查询用户成功')
          this.editForm = res.data.data
        })
        this.editDialogVisible = true
      },
      //关闭更新对话框时返回原样
      editDialogClosed() {
          this.$refs.editFormRef.resetFields()
      },
      //修改用户信息并提交
      editUserInfo() {
        this.$refs.editFormRef.validate(valid => {
          if (!valid) return
          //validate可以进行预验证，如果前面定义的规则都通过，则返回true
          //  这时再发起网络请求
          this.$http.put('users/'+this.editForm.id,
            {email:this.editForm.email,
                   mobile:this.editForm.mobile})
            .then(res => {
              if (res.data.meta.status !== 200){
               return  this.$message.error('更新用户失败')
              }
              // console.log(res)
              //必备操作
              //关闭窗口
              this.editDialogVisible = false
              //重新获取用户列表
              this.getUserList()
              //提示用户修改成功
              this.$message.success('更新用户成功')
            })
        })
      },
      //根据id删除用户
      removeUserById (id) {
        //这是弹框组件
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          //确认时res会返回confirm
          if (res === 'confirm') {
             //发起请求删除用户信息
            this.$http.delete('users/'+id)
            .then(res => {
              if (res.data.meta.status !==200) {
               return  this.$message.error('删除用户失败')
              }
              this.$message.success('删除用户成功')
              this.getUserList()
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //展示分配角色对话框
      setRole(userInfo){
        this.userInfo = userInfo
        //在展示对话框之前，获取所有角色列表
        this.$http.get('roles')
        .then(res =>{
          if (res.data.meta.status !== 200){
           return  this.$message.error('获取角色列表失败')
          }
          this.rolesList = res.data.data
        })
        this.setRoleDialogVisible = true
      },
      //点击按钮，分配角色
      saveRoleInfo() {
        if (!this.selectedRoleId) {
         return  this.$message.error('请选择要分配的角色')
        }
        this.$http.put(`users/${this.userInfo.id}/role`,{rid:this.selectedRoleId})
        .then(res => {
          if (res.data.meta.status !== 200){
            return  this.$message.error('分配角色失败')
          }
          this.$message.success('分配角色成功')
          this.getUserList()
          this.setRoleDialogVisible = false
        })
      },
      //监听分配角色对话框的关闭事件
      setRoleDialogClosed() {
        this.selectedRoleId = ''
        this.userInfo = {}
      }
    }
  }
</script>

<style scoped>

</style>
